<template>

	<view class="list">
		<!-- 刷新页面后的顶部提示框 -->
		<!-- 当前弹出内容没有实际逻辑 ，可根据当前业务修改弹出提示 -->
		<view class="tips" :class="{ 'tips-ani': tipShow }">为您更新了{{num}}条最新新闻动态</view>
			<view>
			<!-- 基于 uni-list 的页面布局 -->
			<uni-list >
				<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
				<uni-list-item :border="true" :to="'/pages/detail?model=product&id='+item.id" class="uni-list-item--waterfall" title="自定义商品列表" v-for="(item,index) in datalist" :key="item.id" >
					<!-- 通过header插槽定义列表左侧图片 -->
					<template v-slot:header>
						<view class="uni-thumb shop-picture">
							<image lazy-load="true"  :src="item.litpic" mode="aspectFill"></image>
						</view>
					</template>
					<!-- 通过body插槽定义商品布局 -->
					<view slot="body" class="shop">
						<view>
							<view class="uni-title">
								<text class="uni-ellipsis-2">{{ item.title }}</text>
							</view>
							<view>
								<text class="uni-tag hot-tag" v-if="item.jzattr">推荐</text>
								<text v-for="tag in tags" :key="tag" class="uni-tag">{{ tag }}</text>
							</view>
						</view>
						<view>
							<view class="shop-price">
								<text>¥</text>
								<text class="shop-price-text">{{ item.price }}</text>
								
							</view>
							<view class="uni-note">热度 {{ item.hits }} 月销量 {{ item.stock_num }}</view>
							
						</view>
					</view>
				</uni-list-item>
			</uni-list>
			<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
			<uni-load-more v-if="loading || status==='more' " :status="status" />
		</view>
	</view>
</template>

<script>
	var config = require('../../common/util.js');
	
	export default {
		components: {},
		data() {
			return {
				datalist:[],
				pageNo:1,
				tabIndex:1,
				pageSize:10,
				tags:[],
				status:'more',
				loading:false,
				ispull:0,
				num:10,
				tipShow: false // 是否显示顶部提示框
			};
		},
		onLoad() {
			this.getclass();
			this.getproduct();
		},
		onShow(){
			// #ifdef MP-BAIDU
			swan.setPageInfo({
				title: '产品中心',
				keywords: '极致CMS,企业建站,免费CMS,开源CMS,免费商用CMS,资讯小程序',
				description: '这是一个免费商用的极致新闻资讯小程序，赶紧来分享使用吧！',
				articleTitle: '功能强大，免费开源CMS，免费商用的小程序源码！',
				releaseDate: config.nowday(),
				image: [
					'/static/banner.png'
				],
				/*
				video: [{
					url: 'https://www.baidu.com/mx/v12.mp4',
					duration: '100',
					image: 'https://ms-static.cdn.bcebos.com/miniappdocs/img/image-scaleToFill.png'
				}],
				visit: {
					pv: '1000',
					uv: '100',
					sessionDuration: '130'
				},
				
				likes: '75',//点赞
				comments: '13',//评论
				collects: '23',//收藏
				shares: '8',//分享
				followers: '35',//关注
				*/
				success: res => {
					console.log('setPageInfo success', res);
				},
				fail: err => {
					console.log('setPageInfo fail', err);
				}
			})
			// #endif
		},
		
		onShareAppMessage(res) {
			return {
			  title: '产品中心',
			  path: '/pages/product/product',
			  imageUrl: '/static/banner.png'
			}
		  },
		  // 自定义页面的分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '产品中心',
				path: '/pages/product/product',
				imageUrl: '/static/banner.png'
			}
		},
		methods: {
			
			changeclass(tid){
				this.tabIndex = tid;
				this.pageNo = 1;
				this.datalist = [];
				this.getarticle();
				
			},
			getclass(){
				var that = this;
				uni.request({
					  url: config.webapi+'/getData/getclass',
					  data: {
							  key:config.apikey,
							  model:'classtype',
							  id:2,
							  isall:1
						  },
					  success: (res) => {
						 // console.log(res.data);
						  if(res.data.code!=0){
							  uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon :'error'
							  });
						  }
						  let len = res.data.data.length;
						  for(var i=0;i<len;i++){
							  if(res.data.data[i].litpic){
								  res.data.data[i].litpic = res.data.data[i].litpic.indexOf('http')>-1 ? res.data.data[i].litpic : config.filepath+res.data.data[i].litpic;
								  	 
							  }
							  
							
						  }
						 that.classlist = res.data.data;
						 
						
						 
					  },
				})
			},
			getproduct(){
				var that = this;
				this.loading = true;
				uni.request({
					  url: config.webapi+'/getData/getDataPage',
					  data: {
							  key:config.apikey,
							  model:'product',
							  tid:this.tabIndex,
							  isall:1,
							  isshow:1,
							  page:this.pageNo,
							  limit:this.pageSize,
						  },
					  success: (res) => {
						 // console.log(res.data);
						 that.loading = false;
						  if(res.data.code!=0){
							  uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon :'error'
							  });
						  }
						  if(res.data.data.length==0){
							  uni.showToast({
								title: '没有了',
								duration: 2000,
								icon :'error'
							  });
							  return ;
						  }
						  let len = res.data.data.length;
						  that.num= len;
						  if(len>0){
							  that.tipShow = true
							  clearTimeout(that.timer)
							  this.timer = setTimeout(()=>{
							  	that.tipShow  = false
							  	
							  },1000)
							 
						  }
						  for(var i=0;i<len;i++){
							  if(res.data.data[i].litpic){
								  res.data.data[i].litpic = res.data.data[i].litpic.indexOf('http')>-1 ? res.data.data[i].litpic : config.filepath+res.data.data[i].litpic;
								 						 
							  }
							  res.data.data[i].addtime = config.getLocalTime(res.data.data[i].addtime)
							  
							  var tags = [];
							  if(res.data.data[i].tags){
								  var tt = res.data.data[i].tags.split(',');
								  for(var j=0;j<tt.length;j++){
									  if(tt[j]){
										  tags.push(tt[j]);
									  }
								  }
							  }
							  that.tags = tags;
							  if(that.ispull!=1){
								  that.datalist.push(res.data.data[i]);			
							  }
							  		  
							
						  }
						  if(that.ispull){
							  that.datalist = res.data.data;
						  }
						
						
						 
					  },
				})
			},
			view(model,id){
				uni.navigateTo({
					url: '/pages/detail?model='+model+'&id='+id
				});
			},
			
		},
		/**
		 * 下拉刷新回调函数
		 */
		onPullDownRefresh() {
			this.status = 'more'
			this.pageNo = this.pageNo+1;
			this.getproduct();
			this.ispull = 1;
			uni.stopPullDownRefresh()
		},
		/**
		 * 上拉加载回调函数
		 */
		onReachBottom() {
			this.ispull = 0;
			this.pageNo = parseInt(this.pageNo)+1;
			this.getproduct();
		}
	};
</script>

<style lang="scss">
	@import '@/common/uni-ui.scss';

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	.tips {
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s;
	}

	.tips-ani {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}

	.shop {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.shop-picture {
		width: 110px;
		height: 110px;
	}

	.shop-picture-column {
		width: 100%;
		height: 170px;
		margin-bottom: 10px;
	}

	.shop-price {
		margin-top: 5px;
		font-size: 12px;
		color: #ff5a5f;
	}

	.shop-price-text {
		font-size: 16px;
	}

	.hot-tag {
		background: #ff5a5f;
		border: none;
		color: #fff;
	}

	.button-box {
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		background: #007AFF;
		color: #fff;
	}

	.uni-link {
		flex-shrink: 0;
	}

	.ellipsis {
		display: flex;
		overflow: hidden;
	}

	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}


	// 默认加入 scoped ，所以外面加一层提升权重
	.list {
		.uni-list--waterfall {

			/* #ifndef H5 || APP-VUE */
			// 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下
			/deep/ .uni-list {
				/* #endif */
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 5px;
				box-sizing: border-box;

				/* #ifdef H5 || APP-VUE */
				// h5 和 app-vue 使用深度选择器，因为默认使用了 scoped ，所以样式会无法穿透
				/deep/
				/* #endif */
				.uni-list-item--waterfall {
					width: 50%;
					box-sizing: border-box;

					.uni-list-item__container {
						padding: 5px;
						flex-direction: column;
					}
				}

				/* #ifndef H5 || APP-VUE */
			}

			/* #endif */
		}
	}
</style>
